<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登入</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form action="" method="post" id="form">
        <h1 id="loginMsg">登入</h1>
        <p>学号:<input id="username" name="username" v-model="user.id" type="text"></p>
        <br>
        <div id="errorMsg" v-if="errorMsgShow">学号不存在或者密码错误</div>
        <p>密码:<input id="password" name="password" v-model="user.password" type="password"></p>
        <p>身份:
            <input type="radio" name="status" v-model="user.status" value="0">学生
            <input type="radio" name="status" v-model="user.status" value="1">老师
        </p>
        <div id="subDiv">
            <input type="button" class="button" @click="submitForm" value="提交">
            <input type="reset" class="button" value="重置">
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#loginDiv",
        data(){
            return {
                errorMsgShow: false,
                user:{}
            }

        },
        methods:{
            submitForm(){
                // 发送ajax请求，添加
                var _this = this;
                //老师
                if(this.user.status == 1){
                    axios({
                        method:"post",
                        url:"http://localhost:8080/coursesystem/loginServlet",
                        data:_this.user
                    }).then(function (resp) {
                        if(resp.data == "success"){
                            alert("登入成功！");
                            _this.errorMsgShow = false;
                            location.href="http://localhost:8080/coursesystem/TeacherCourse.html?" + _this.user.id;
                        }else{
                            _this.errorMsgShow = true;
                        }
                    })
                }else if(this.user.status == 0){
                 //学生
                    axios({
                        method:"post",
                        url:"http://localhost:8080/coursesystem/loginServlet",
                        data:_this.user
                    }).then(function (resp) {
                        if(resp.data == "success"){
                            alert("登入成功！");
                            _this.errorMsgShow = false;
                            location.href="http://localhost:8080/coursesystem/StudentCourseSelect.html?" + _this.user.id;
                        }else{
                            _this.errorMsgShow = true;
                        }
                    })
                }else{
                    _this.errorMsgShow = true;
                }
            }
        }
    })
</script>
</body>
</html>